<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-left">
				<view class="greeting">{{ greeting }}</view>
				<view class="slogan">
					<text>我们一起守护地球</text>
					<text class="globe-icon">🌍</text>
				</view>
			</view>
			<view class="header-right">
				<view class="weather-info">
					<view class="temperature">22℃ 晴朗</view>
					<view class="air-quality">空气质量:良好(58)</view>
				</view>
				<view class="notification" @click="showMessageCenter">
					<text class="bell-icon">🔔</text>
					<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
				</view>
			</view>
		</view>

		<!-- 环保数据卡片 -->
		<view class="data-card" @click="showDataDetail">
			<view class="card-left">
				<view class="carbon-value">{{ carbonValue }}</view>
				<view class="carbon-label">碳环保值</view>
				<view class="recycle-info">
					<view class="recycle-item">
						<text class="label">今日回收</text>
						<text class="value">{{ todayRecycle }}</text>
					</view>
					<view class="recycle-item">
						<text class="label">碳减排</text>
						<text class="value">{{ carbonReduction }}</text>
					</view>
				</view>
			</view>
			<view class="card-right">
				<view class="gain-info">
					<text class="gain-value">+{{ todayGain }}</text>
					<text class="gain-label">今日获得</text>
				</view>
				<view class="streak-info">
					<text class="streak-value">{{ streakDays }}</text>
					<text class="streak-label">连续天数</text>
				</view>
			</view>
		</view>

		<!-- 快速操作 -->
		<view class="quick-actions">
			<view class="section-title">快速操作</view>
			<view class="action-grid">
				<view class="action-item" @click="showQuickRecycle">
					<view class="action-icon recycle-icon">♻️</view>
					<view class="action-title">快速回收</view>
					<view class="action-desc">开始回收垃圾</view>
				</view>
				<view class="action-item" @click="openNearbyModal">
					<view class="action-icon location-icon">📍</view>
					<view class="action-title">附近回收点</view>
					<view class="action-desc">查找回收站点</view>
				</view>
			</view>
		</view>

		<!-- 今日任务 -->
		<view class="today-tasks">
			<view class="section-header">
				<view class="section-title">
					<text class="task-icon">⚡</text>
					今日任务
				</view>
				<view class="task-progress">{{ completedTasks }}/{{ totalTasks }}</view>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(task, index) in tasks" :key="index" @click="toggleTask(index)">
					<view class="task-radio" :class="{ 'checked': task.completed }"></view>
					<view class="task-content">
						<view class="task-title">{{ task.title }}</view>
						<view class="task-desc">{{ task.description }}</view>
						<view class="task-progress-bar">
							<view class="progress-fill" :style="{ width: task.progress + '%' }"></view>
						</view>
					</view>
					<view class="task-points">+{{ task.points }}</view>
				</view>
			</view>
		</view>

		<!-- 快速回收弹窗 -->
		<view class="modal-overlay" v-if="showQuickRecycleModal" @click="closeQuickRecycle">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="modal-title">快速回收</view>
					<view class="modal-close" @click="closeQuickRecycle">×</view>
				</view>
				<view class="modal-body">
					<view class="recycle-categories">
						<view class="category-item" v-for="(category, index) in recycleCategories" :key="index" @click="selectCategory(index)" :class="{ 'selected': selectedCategory === index }">
							<view class="category-icon">
  <template v-if="category.icon.startsWith('/')">
    <image :src="category.icon" mode="aspectFit" class="category-image"></image>
  </template>
  <template v-else>
    {{ category.icon }}
  </template>
</view>
							<view class="category-name">{{ category.name }}</view>
						</view>
					</view>
					<view class="recycle-input">
						<input type="text" v-model="recycleDescription" placeholder="描述回收物品" class="input-field" />
					</view>
					<view class="recycle-actions">
						<button class="btn-cancel" @click="closeQuickRecycle">取消</button>
						<button class="btn-confirm" @click="confirmRecycle">确认回收</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 消息中心弹窗 -->
		<view class="modal-overlay" v-if="showMessageModal" @click="closeMessageModal">
			<view class="modal-content message-modal" @click.stop>
				<view class="modal-header">
					<view class="modal-title">消息中心</view>
					<view class="modal-close" @click="closeMessageModal">×</view>
				</view>
				<view class="modal-body">
					<view class="message-list">
						<view class="message-item" v-for="(message, index) in messages" :key="index" @click="readMessage(index)">
							<view class="message-icon">{{ message.icon }}</view>
							<view class="message-content">
								<view class="message-title">{{ message.title }}</view>
								<view class="message-desc">{{ message.description }}</view>
								<view class="message-time">{{ message.time }}</view>
							</view>
							<view class="message-status" v-if="!message.read">●</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 任务完成弹窗 -->
		<view class="modal-overlay" v-if="showTaskCompleteModal" @click="closeTaskComplete">
			<view class="modal-content task-complete-modal" @click.stop>
				<view class="modal-body">
					<view class="complete-icon">🎉</view>
					<view class="complete-title">任务完成！</view>
					<view class="complete-desc">恭喜您完成了"{{ completedTaskTitle }}"</view>
					<view class="complete-reward">
						<text class="reward-label">获得积分：</text>
						<text class="reward-value">+{{ completedTaskPoints }}</text>
					</view>
					<button class="btn-confirm" @click="closeTaskComplete">确定</button>
				</view>
			</view>
		</view>

		<!-- 数据详情弹窗 -->
		<view class="modal-overlay" v-if="showDataDetailModal" @click="closeDataDetail">
			<view class="modal-content data-detail-modal" @click.stop>
				<view class="modal-header">
					<view class="modal-title">环保数据详情</view>
					<view class="modal-close" @click="closeDataDetail">×</view>
				</view>
				<view class="modal-body">
					<view class="data-chart">
						<view class="chart-item">
							<view class="chart-title">本周环保值趋势</view>
							<view class="chart-bars">
								<view class="chart-bar" v-for="(value, index) in weeklyData" :key="index" :style="{ height: value + '%' }"></view>
							</view>
						</view>
					</view>
					<view class="data-stats">
						<view class="stat-item">
							<view class="stat-value">{{ totalRecycle }}</view>
							<view class="stat-label">累计回收</view>
						</view>
						<view class="stat-item">
							<view class="stat-value">{{ totalCarbonReduction }}</view>
							<view class="stat-label">累计减排</view>
						</view>
						<view class="stat-item">
							<view class="stat-value">{{ totalPoints }}</view>
							<view class="stat-label">累计积分</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			<!-- 环保小贴士 -->
		<view class="environmental-tips">
			<view class="section-title">
				<text class="tips-icon">💡</text>
				环保小贴士
			</view>
			<view class="tips-content">
				<view class="tips-date">今天是{{ currentDate }}</view>
				<view class="tips-message">{{ currentTip }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		// 生成当前日期
		const today = new Date();
		const year = today.getFullYear();
		const month = String(today.getMonth() + 1).padStart(2, '0');
		const day = String(today.getDate()).padStart(2, '0');
		const currentDate = `${year}-${month}-${day}`;
			
		// 环保小贴士数据
		const tips = [
			"绿水青山，你我守护！",
			"环保多一分，地球美十分！",
			"节约资源，绿色生活！",
			"少用塑料，地球减负！",
			"垃圾分类，举手之劳！",
			"低碳出行，健康未来！",
			"节约用水，从点滴开始！",
			"绿色地球，人人有责！",
			"拒绝浪费，珍惜自然！",
			"爱护环境，就是爱自己！"
		];
			
		// 每天基于日期生成一致的随机索引
		const seed = parseInt(`${year}${month}${day}`);
		const randomIndex = ((seed * 9301 + 49297) % 233280) % tips.length;
		const currentTip = tips[randomIndex];
		return {
			currentDate,
			currentTip,
			// 基础数据
			greeting: '下午好!',
			carbonValue: 0,
			todayRecycle: 0,
			carbonReduction: '0kg',
			todayGain: 0,
			streakDays: 0,
			unreadCount: 0,
			
			// 任务数据
			tasks: [
				{
					title: '垃圾分类达人',
					description: '正确分类3种不同垃圾',
					progress: 60,
					points: 20,
					completed: false
				},
				{
					title: '节能小卫士',
					description: '关闭不必要电器30分钟',
					progress: 40,
					points: 15,
					completed: false
				},
				{
					title: '环保知识学习',
					description: '完成一篇环保文章学习',
					progress: 0,
					points: 25,
					completed: false
				}
			],
			
			// 弹窗状态
			showQuickRecycleModal: false,
			showTaskCompleteModal: false,
			showDataDetailModal: false,
			showMessageModal: false,
			
			// 快速回收数据
			recycleCategories: [
				{ icon: '/static/icons/glass-bottle.svg', name: '玻璃瓶' },
				{ icon: '/static/icons/plastic-bottle.svg', name: '塑料瓶' },
				{ icon: '/static/icons/can.svg', name: '易拉罐' }
			],
			selectedCategory: -1,
			recycleDescription: '',
			
			// 附近回收点数据
			nearbyLocations: [
				{
					name: '绿色回收站',
					address: '北京市朝阳区建国路88号',
					distance: '500m'
				},
				{
					name: '环保回收中心',
					address: '北京市朝阳区三里屯路15号',
					distance: '1.2km'
				},
				{
					name: '社区回收点',
					address: '北京市朝阳区工体北路1号',
					distance: '2.1km'
				}
			],
			
			// 任务完成数据
			completedTaskTitle: '',
			completedTaskPoints: 0,
			
			// 数据详情
			weeklyData: [65, 78, 82, 75, 90, 85, 88],
			totalRecycle: 156,
			totalCarbonReduction: '12.5kg',
			totalPoints: 2840
		}
	},
	computed: {
		completedTasks() {
			return this.tasks.filter(task => task.completed).length;
		},
		totalTasks() {
			return this.tasks.length;
		}
	},
	onLoad() {
		// 从本地存储读取数据，如果没有则使用默认值
		this.loadDataFromStorage();
	},
	// 页面显示时重新读取数据，确保从其他页面返回时数据能更新
	onShow() {
		this.loadDataFromStorage();
	},
	methods: {
		// 从本地存储加载数据
		loadDataFromStorage() {
			this.carbonValue = parseInt(uni.getStorageSync('carbonValue') || '245');
			this.todayRecycle = parseInt(uni.getStorageSync('todayRecycle') || '3');
			const reductionValue = parseFloat(uni.getStorageSync('carbonReduction') || '0.15');
			this.carbonReduction = reductionValue.toFixed(2) + 'kg';
			this.todayGain = parseInt(uni.getStorageSync('todayGain') || '45');
			this.streakDays = parseInt(uni.getStorageSync('streakDays') || '7');
			this.unreadCount = parseInt(uni.getStorageSync('unreadCount') || '3');
			
			// 显示加载的数据，用于调试
			console.log('首页加载数据：', {
				carbonValue: this.carbonValue,
				todayRecycle: this.todayRecycle,
				carbonReduction: this.carbonReduction,
				todayGain: this.todayGain
			});
		},
		// 快速回收相关方法
		showQuickRecycle() {
			this.showQuickRecycleModal = true;
		},
		closeQuickRecycle() {
			this.showQuickRecycleModal = false;
			this.selectedCategory = -1;
			this.recycleDescription = '';
		},
		selectCategory(index) {
			this.selectedCategory = index;
		},
		confirmRecycle() {
			if (this.selectedCategory === -1) {
				uni.showToast({
					title: '请选择回收类别',
					icon: 'none'
				});
				return;
			}
			
			// 根据选择的类别设置页面路径和类型参数
			let pagePath = '';
			let recycleType = '';
			
			switch(this.selectedCategory) {
				case 0: // 玻璃瓶
					pagePath = '/pages/recycle/glass-bottle';
					recycleType = 'glass';
					break;
				case 1: // 塑料瓶
					pagePath = '/pages/recycle/plastic-bottle';
					recycleType = 'plastic';
					break;
				case 2: // 易拉罐
					pagePath = '/pages/recycle/can';
					recycleType = 'can';
					break;
			}
			
			// 跳转到对应回收页面，并传递回收类型参数
			if (pagePath) {
				// 先关闭快速回收弹窗
				this.closeQuickRecycle();
				
				// 然后跳转到回收页面
				uni.navigateTo({
					url: `${pagePath}?type=${recycleType}`
				});
			}
		},
		
		// 附近回收点相关方法
		openNearbyModal() {
			// 直接跳转到附近回收点页面
			uni.navigateTo({
				url: '/pages/nearby/nearby'
			});
		},
		
		// 消息中心相关方法
		showMessageCenter() {
			this.showMessageModal = true;
		},
		closeMessageModal() {
			this.showMessageModal = false;
		},
		readMessage(index) {
			this.messages[index].read = true;
			this.unreadCount = Math.max(0, this.unreadCount - 1);
		},
		
		// 任务相关方法
		toggleTask(index) {
			const task = this.tasks[index];
			if (!task.completed) {
				task.completed = true;
				task.progress = 100;
				
				this.completedTaskTitle = task.title;
				this.completedTaskPoints = task.points;
				this.showTaskCompleteModal = true;
				
				// 更新数据
				this.carbonValue += task.points;
				this.todayGain += task.points;
			}
		},
		closeTaskComplete() {
			this.showTaskCompleteModal = false;
		},
		
		// 数据详情相关方法
		showDataDetail() {
			this.showDataDetailModal = true;
		},
		closeDataDetail() {
			this.showDataDetailModal = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 头部区域 */
.header {
	background: linear-gradient(135deg, #4CAF50, #8BC34A);
	padding: 60rpx 40rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	color: white;
}

.header-left {
	.greeting {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.slogan {
		font-size: 28rpx;
		opacity: 0.9;
		display: flex;
		align-items: center;
		
		.globe-icon {
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}
}

.header-right {
	text-align: right;
	
	.weather-info {
		margin-bottom: 20rpx;
		
		.temperature {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 5rpx;
		}
		
		.air-quality {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
	
	.notification {
		position: relative;
		display: inline-block;
		
		.bell-icon {
			font-size: 40rpx;
		}
		
		.badge {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			background-color: #ff4757;
			color: white;
			font-size: 20rpx;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

/* 环保数据卡片 */
.data-card {
	margin: 30rpx 40rpx;
	background: linear-gradient(90deg, #4CAF50, #2196F3);
	border-radius: 20rpx;
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
	transition: transform 0.2s;
	
	&:active {
		transform: scale(0.98);
	}
}

.card-left {
	.carbon-value {
		font-size: 72rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.carbon-label {
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 30rpx;
	}
	
	.recycle-info {
		.recycle-item {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			
			.label {
				font-size: 24rpx;
				opacity: 0.8;
				margin-right: 20rpx;
			}
			
			.value {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
}

.card-right {
	text-align: right;
	
	.gain-info {
		margin-bottom: 30rpx;
		
		.gain-value {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #FFD700;
		}
		
		.gain-label {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
	
	.streak-info {
		.streak-value {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
		}
		
		.streak-label {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
}

/* 快速操作 */
.quick-actions {
	margin: 30rpx 40rpx;
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.action-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}
	
	.action-item {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.2s;
		
		&:active {
			transform: scale(0.95);
		}
		
		.action-icon {
			font-size: 48rpx;
			margin-bottom: 15rpx;
		}
		
		.action-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.action-desc {
			font-size: 22rpx;
			color: #666;
		}
	}
}

/* 今日任务 */
.today-tasks {
	margin: 30rpx 40rpx;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: flex;
			align-items: center;
			
			.task-icon {
				margin-right: 10rpx;
				font-size: 32rpx;
			}
		}
		
		.task-progress {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.task-list {
		.task-item {
			background: white;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: transform 0.2s;
			
			&:active {
				transform: scale(0.98);
			}
			
			.task-radio {
				width: 40rpx;
				height: 40rpx;
				border: 3rpx solid #ddd;
				border-radius: 50%;
				margin-right: 20rpx;
				position: relative;
				transition: all 0.3s ease;
				
				&.checked {
					background-color: #4CAF50;
					border-color: #4CAF50;
					
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 20rpx;
						height: 20rpx;
						background-color: white;
						border-radius: 50%;
					}
				}
			}
			
			.task-content {
				flex: 1;
				
				.task-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.task-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 15rpx;
				}
				
				.task-progress-bar {
					width: 100%;
					height: 8rpx;
					background-color: #f0f0f0;
					border-radius: 4rpx;
					overflow: hidden;
					
					.progress-fill {
						height: 100%;
						background: linear-gradient(90deg, #4CAF50, #8BC34A);
						transition: width 0.3s ease;
					}
				}
			}
			
			.task-points {
				font-size: 28rpx;
				font-weight: bold;
				color: #4CAF50;
				margin-left: 20rpx;
			}
		}
	}
}

/* 环保贡献 */
.environmental-contribution {
	margin: 30rpx 40rpx;
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		
		.leaf-icon {
			margin-right: 10rpx;
			font-size: 32rpx;
		}
	}
	
	.contribution-content {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.contribution-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.contribution-icon {
				font-size: 40rpx;
				margin-right: 20rpx;
			}
			
			.contribution-info {
				flex: 1;
				
				.contribution-title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 5rpx;
				}
				
				.contribution-value {
					font-size: 24rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
		}
	}
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border-radius: 20rpx;
	width: 90%;
	max-width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
	animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.modal-close {
		font-size: 40rpx;
		color: #999;
		cursor: pointer;
	}
}

.modal-body {
	padding: 30rpx;
}

/* 快速回收弹窗 */
.recycle-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	margin-bottom: 30rpx;
	
	.category-item {
		text-align: center;
		padding: 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #f0f0f0;
		transition: all 0.3s ease;
		
		&.selected {
			border-color: #4CAF50;
			background-color: #f0f9f0;
		}
		
		.category-icon {
			font-size: 48rpx;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			margin: 0 auto 10rpx;
			
			&.selected {
				color: #4CAF50;
			}
		}

		.category-image {
			width: 48rpx;
			height: 48rpx;
			transition: all 0.3s ease;
		}
		
		.category-item.selected .category-image {
			filter: hue-rotate(-20deg) saturate(1.5);
		}
		
		.category-name {
			font-size: 24rpx;
			color: #333;
		}
	}
}

.recycle-input {
	margin-bottom: 30rpx;
	
	.input-field {
		width: 100%;
		padding: 20rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 12rpx;
		font-size: 28rpx;
	}
}

.recycle-actions {
	display: flex;
	gap: 20rpx;
	
	.btn-cancel, .btn-confirm {
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}
	
	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.btn-confirm {
		background-color: #4CAF50;
		color: white;
	}
}

/* 扫码识别弹窗 */
.scan-modal {
	.modal-body {
		text-align: center;
	}
	
	.scan-area {
		margin-bottom: 30rpx;
		
		.scan-frame {
			width: 300rpx;
			height: 300rpx;
			border: 4rpx solid #4CAF50;
			border-radius: 20rpx;
			margin: 0 auto 20rpx;
			position: relative;
			overflow: hidden;
			
			.scan-line {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 4rpx;
				background: linear-gradient(90deg, transparent, #4CAF50, transparent);
				animation: scanMove 2s infinite;
			}
		}
		
		.scan-tip {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.scan-actions {
		display: flex;
		gap: 20rpx;
		
		.btn-scan, .btn-manual {
			flex: 1;
			padding: 20rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			border: none;
		}
		
		.btn-scan {
			background-color: #4CAF50;
			color: white;
		}
		
		.btn-manual {
			background-color: #f5f5f5;
			color: #666;
		}
	}
}

@keyframes scanMove {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(300rpx);
	}
	100% {
		transform: translateY(0);
	}
}

/* 附近回收点弹窗 */
.nearby-modal {
	.modal-body {
		max-height: 60vh;
		overflow-y: auto;
	}
	
	.location-list {
		.location-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.location-icon {
				font-size: 40rpx;
				margin-right: 20rpx;
			}
			
			.location-info {
				flex: 1;
				
				.location-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 5rpx;
				}
				
				.location-address {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 5rpx;
				}
				
				.location-distance {
					font-size: 22rpx;
					color: #4CAF50;
				}
			}
			
			.location-action {
				.btn-navigate {
					padding: 10rpx 20rpx;
					background-color: #4CAF50;
					color: white;
					border: none;
					border-radius: 8rpx;
					font-size: 24rpx;
				}
			}
		}
	}
}

/* 消息中心弹窗 */
.message-modal {
	.modal-body {
		max-height: 60vh;
		overflow-y: auto;
	}
	
	.message-list {
		.message-item {
			display: flex;
			align-items: flex-start;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.message-icon {
				font-size: 40rpx;
				margin-right: 20rpx;
			}
			
			.message-content {
				flex: 1;
				
				.message-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 5rpx;
				}
				
				.message-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 5rpx;
				}
				
				.message-time {
					font-size: 22rpx;
					color: #999;
				}
			}
			
			.message-status {
				font-size: 24rpx;
				color: #ff4757;
			}
		}
	}
}

/* 任务完成弹窗 */
.task-complete-modal {
	.modal-body {
		text-align: center;
		padding: 60rpx 30rpx;
	}
	
	.complete-icon {
		font-size: 120rpx;
		margin-bottom: 20rpx;
	}
	
	.complete-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.complete-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}
	
	.complete-reward {
		margin-bottom: 40rpx;
		
		.reward-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.reward-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFD700;
		}
	}
	
	.btn-confirm {
		width: 100%;
		padding: 20rpx;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
	}
}

/* 数据详情弹窗 */
.environmental-tips {
	margin: 30rpx 40rpx 60rpx;

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.tips-icon {
			margin-right: 10rpx;
			font-size: 32rpx;
		}
	}

	.tips-content {
		background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		.tips-date {
			font-size: 24rpx;
			color: #00acc1;
			margin-bottom: 15rpx;
		}

		.tips-message {
			font-size: 30rpx;
			color: #01579b;
			line-height: 1.6;
			text-align: center;
		}
	}
}

.data-detail-modal {
	.modal-body {
		.data-chart {
			margin-bottom: 30rpx;
			
			.chart-item {
				.chart-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					text-align: center;
				}
				
				.chart-bars {
					display: flex;
					align-items: end;
					justify-content: space-between;
					height: 200rpx;
					padding: 20rpx 0;
					
					.chart-bar {
						width: 40rpx;
						background: linear-gradient(to top, #4CAF50, #8BC34A);
						border-radius: 4rpx;
						transition: height 0.3s ease;
					}
				}
			}
		}
		
		.data-stats {
			display: flex;
			justify-content: space-around;
			
			.stat-item {
				text-align: center;
				
				.stat-value {
					font-size: 36rpx;
					font-weight: bold;
					color: #4CAF50;
					margin-bottom: 8rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
}
</style>
